<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/welcome.css" media="all">

    <!-- 动画精灵的配置-->
    <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
    <script type="text/javascript">
        //角色数组
        var characters = ['chitose','Epsilon2.1','Gantzert_Felixander','haru01','haru02','haruto','hibiki','hijiki','izumi','koharu','miku','nico','ni-j','nipsilon','nito','shizuku','tororo','tsumiki','Unitychan','wanko','z16'];

        //随意选择其中一个
        var petName = characters[15];
        L2Dwidget.init({
            "model": {
                "jsonPath": "https://unpkg.com/live2d-widget-model-" + petName + "@1.0.5/assets/" + petName + ".model.json",
                "scale": 1
            },
            "display": {
                "position": "right",
                "width": 150,
                "height": 300,
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 0.8,
                "opacityOnHover": 1
            },
            "dialog": {
                "enable": true,
                "script": {
                    //每隔20s显示的句子
                    'every idle 20s': '$hitokoto$',
                    //悬浮在down类型标签显示的对话框
                    'hover .down': '星星在天上而你在我心里 (*/ω＼*),和好友开始聊天吧',
                    'hover .tit': '欢迎来到Cfeng.net, 玩的愉快哦*o*',
                    'hover .music': '点击音乐按钮可以开启或者关闭背景音乐',
                    //触碰身体显示
                    'tap body': '哎呀！别碰我！',
                    //触碰脸显示
                    'tap face': '讨厌，快学习',
                }
            }
        });
    </script>
</head>
<body>
<!--cavas-->
<div style="position: fixed;top: 0;left:0;bottom: 0;right: 0;z-index: 0;"> <!-- z-index = 0-->
    <canvas id="canvas" style="background-image:url('/img/welcomebg.jpg') ; "></canvas> <!--rgb(50,64,87);-->
</div>

<!-- 欢迎来到Cfeng.net，定制化了文件服务，笔记服务，聊天服务-->
<div class="welMain" align="center">
    <div class="welcome">
        <h1 class="tit">
            欢迎来到Cfeng的个人网站
            <div class="border">欢迎大家使用</div>
        </h1>

        <h2 class="intro"></h2>
    </div>
    <div class="bounce down" onclick="toChat()" style="float: right">
        <i>Start</i>
    </div>
    <div class="bounce down music" onclick="changePlay()" style="float: right;left: 95%">
        <i>音乐</i>
    </div>
    <div  class="layui-carousel"  id="cfengChat" lay-filter="cfengChat" style="background-color: #0f0f0f;opacity: 0.8;">
        <div carousel-item="">
            <div><a href="/sys/toChat" target="_parent"><img width="750px" height="420px" src="/img/welChat.PNG"/></a></div>
            <div><a href="/sys/toNote" target="_parent"><img width="750px" height="420px" src="/img/welNote.PNG"/></a></div>
            <div><a href="/sys/toFile" target="_parent"><img width="750px" height="420px" src="/img/welFile.PNG"/></a></div>
            <div><a href="" target="_parent"><img width="750px" height="420px" src="/img/welcomebg.jpg"/></a></div>
            <div><a href="" target="_parent"><img width="750px" height="420px" src="/img/indexbg1.jpg"/></a></div>
        </div>
    </div>

    <!-- 首页的背景音乐 autoplay自动 loop循环 controls按钮控制 muted静音 preload预加载-->
    <!-- 需要注意一般采用外网播放，这里的src如果直接链接static下面的MP3失败，因为编译的时候会破环文件不能播放-->
    <!-- 其余的解决办法就是替换target中的文件，或者后台进行流转换再使用-->
    <!-- 项目上线之后准备直接使用外网-->
    <audio id="music" src="/music/indexbgmusic.mp3" autoplay loop preload="auto"></audio>
</div>

<script src="/js/JQuerym.js"></script>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/welCavas.js"></script>
<script type="text/javascript">
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#cfengChat',
            arrow: 'always',
            interval: 5000,
            width: '750px',
            height:'420px'
        });

    });

    //使用延时器动态显示intro文字，循环显示
    var str = '这是我的个人网站、提供了STOMP聊天服务,markdown风格的笔记服务和MinIO云文件服务，同时会分享关于编程，开发以及其他方面的一些内容，希望可以对您有所帮助...';
    var idx = 0;
    //跳动按钮的字体颜色随机
    $(".bounce").css("color",'#' + Math.random().toString(16).slice(2,8));
    setTimeout(function fn() {
        // console.log(str);
        var intro = $(".intro").text();
        intro = intro + str.substring(idx,idx+1);
        $(".intro").text(intro);
        //每次都会变化字体颜色
        var introColor = '#' + Math.random().toString(16).slice(2,8);
        $(".intro").css('color',introColor);
        idx++
        if (idx>str.length){
            $(".intro").text("");
            idx = 0
        }
        setTimeout(fn,200)
    },2000)

    //点击跳动div,跳转到聊天室
    toChat = function () {
        top.location.href = "/sys/toChat";
    }

    var tag = true; //tag代表当前的状态
    //音乐控制
    changePlay = function () {
        if(tag) {
            tag = false;
            $("#music").get(0).pause();
        } else {
            tag = true;
            $("#music").get(0).play();
        }
    }

    //背景音乐控制
    // $("#music").get(0).pause(); //关闭，play开启
</script>
</body>
</html>